<template>
  <div class="login">
    <headTit :tit="tit"></headTit>
    <div class="con">
      <div class="form1">
        <div class="row">
          <div class="tag">+86</div>
          <div class="input">
            <input type="text" placeholder="请输入手机号" required>
            <span class="clearinput">
              <i class="iconfont"></i>
            </span>
          </div>
        </div>
        <div class="row">
          <div class="tag">密码</div>
          <div class="input">
            <input type="text" placeholder="请输入密码， 6-16位" required>
            <span class="clearinput">
              <i class="iconfont"></i>
            </span>
          </div>
        </div>
        <div class="row">
          <div class="tag">验证码</div>
          <div class="input">
            <input type="text" placeholder="请输入验证码" required>
            <span class="clearinput">
              <i class="iconfont"></i>
            </span>
          </div>
          <div class="labeldes">
            <img src="../../common/img/yanzheng.jpg" alt="验证码">
          </div>
        </div>
      </div>
      <div class="form1 lrp10">
        <div class="button disable">
          <span>登录</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import headTit from '../../components/headTit/headTit.vue';
  export default {
    components: {
      headTit
    },
    data () {
      return {
        tit: '登录'
      };
    }
  };
</script>

<style lang="scss" scoped>
  .login{
    .con{
      .form1{
        padding-top:15px;

        .row{
          display: flex;
          height: 40px;
          padding:5px 0;
          line-height: 30px;
          background-color: #fff;
          border-bottom: 1px solid #ededed;

          .tag{
            width: 80px;
            text-align: center;
            border-right: 1px solid #ededed;
            font-size: 14px;
            color: #999;
          }
          .input{
            flex: 1;

            input{
              width: 100%;
              height:30px;
              line-height:30px;
              padding: 0 10px 0 15px;
              outline: none;
              font-size: 14px;
              font-weight: 500;
            }
          }
          .labeldes{
            width: 101px;
            height:30px;
            padding:0 10px;
            border-left: 1px solid #ededed;

            img{
              width: 80px;
              height: 30px;
              text-align: center;
            }
          }
        }
      }
    .lrp10 {
      padding-left:10px;
      padding-right:10px;

      .button {
        height: 40px;
        width: 100%;
        border-radius: 4px;
        background-color: #40B883;
        color: #fff;
        text-align: center;
        line-height: 40px;
      }
      .disable{
        background-color: #ddd;
        color: #aaa;
      }
    }
    }
  }
</style>
